﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Ext.Master" AutoEventWireup="true"
    CodeBehind="TabBrowser.aspx.cs" Inherits="MVCnExt.Views.Combo.TabBrowser" %>

<asp:Content ID="manualContent" ContentPlaceHolderID="MainContent" runat="server">
    <mvc:ExtJSON ID="TabBrowse" runat="server">        
        <component>
            <mvc:ExtViewport ID="TabBrowserPortal" layout="border" runat="server">                
                <items>
                    <mvc:ExtPanel xtype="toolbar" region="north" ID="pnlNorth" runat="server">                        
                        <items>
                            <mvc:ExtPanel ID="pnlSub" text="<--" runat="server" xtype="tbbutton">
                                <script>                                                        
                                    click: function() { window.history.back(); }  
                                </script>
                            </mvc:ExtPanel>
                            <mvc:ExtPanel ID="ExtPanel1" text="-->" runat="server" xtype="tbbutton">
                                <script>
                                    click: function() { window.history.forward(); }
                                </script>
                            </mvc:ExtPanel>
                            <mvc:ExtPanel ID="ExtPanel2" text="Address:" runat="server" xtype="tbbutton">
                            </mvc:ExtPanel>
                            <mvc:ExtPanel title="Address" xtype="textfield" ID="addressTextField" Width="300"
                                runat="server">
                                <script>
                                    specialkey: this.onAddressEntered,
					                focus: function(textField) { textField.selectText(); },
					                scope: this
                                </script>
                            </mvc:ExtPanel>
                            <mvc:ExtPanel ID="ExtPanel3" text="Search:" runat="server" xtype="tbbutton">
                            </mvc:ExtPanel>
                            <mvc:ExtPanel title="Search" xtype="textfield" ID="ExtItem1" Width="100" runat="server">
                                <script>
                                    'specialkey': this.onSearchEntered,
					                'focus': function(textField) { textField.selectText(); },
					                scope: this
                                </script>
                            </mvc:ExtPanel>
                        </items>
                    </mvc:ExtPanel>
                    <mvc:ExtTabPanel ID="browserTabPanel" runat="server" xtype="tabpanel" enableTabScroll="true"
                        region="center">
                    </mvc:ExtTabPanel>
                </items>
            </mvc:ExtViewport>
        </component>
    </mvc:ExtJSON>
    <mvc:ExtOnReady ID="onReady1" runat="server">
        <script>
            TabBrowse.prototype = {
                onAddressEntered: function(textField, evt) {
                    if (evt.getKey() != Ext.EventObject.ENTER) return;
                    this.openUrl(textField.getValue());
                },

                onSearchEntered: function(textField, evt) {
                    if (evt.getKey() != Ext.EventObject.ENTER) return;
                    var url = 'http://www.google.com/search?lr=&num=50&ie=utf-8&oe=utf-8&aq=t&hl=en&q=' +
			encodeURIComponent(textField.getValue());
                    Ext.getCmp('addressTextField').setValue(url);
                    this.openUrl(url);
                },

                openUrl: function(url) {
                    if (url.substring(0, 7) != 'http://') { url = 'http://' + url; }
                    // Add Tab
                    var elId = new Date();
                    var browserTabPanel = Ext.getCmp('browserTabPanel');
                    browserTabPanel.add({
                        xtype: 'panel',
                        title: 'Loading...',
                        closable: true,
                        html: '<iframe id="frmTabBrowser" src="' + url + '" width="100%" height="100%" frameborder="0"></iframe>'
                    });
                    this.newTab = browserTabPanel.items.last();
                    browserTabPanel.activate(this.newTab);

                    this.newTab.setTitle(url);

                    //window.setTimeout("alert(Ext.getCmp('browserTabPanel').items.last().getEl().dom.document.getElementById('frmTabBrowser').getElementsByTagName('title')[0].text)", 5000);
                    
                    // Get title from the server
                    Ext.Ajax.request({
                        url: 'getTitle.aspx',
                        params: { url: url },
                        success: function(response, options) {
                            this.newTab.setTitle(response.responseText);
                        },
                        scope: this
                    });
                }
            }

            new TabBrowse().openUrl('http://www.google.com/');
            // Remove Loading image
            setTimeout(function() {
                try {
                Ext.get('loading').remove();
                Ext.get('loading-mask').fadeOut({ remove: true });
                }
                catch(e)
                {
                }
            }, 250);

        </script>
    </mvc:ExtOnReady>
</asp:Content>
